<template>
	<div class="play">
		<!-- 视频 -->
		<div class="video_box">
			<span class="comment_btn" @click="addDialogVisible=true">评论</span>
			<span class="collect" @click="addCollect()">收藏</span>
		<video height="500px" width="700px" controls>
			<source :src="baseUrl+video_url" type="video/mp4" />
		</video>
		</div>
		<!-- 评论 -->
		<el-row>
		  <el-col :span="24" v-for="item, index in commentList" :key="item.id">
			  <div class="grid-content">
				  <span style="float: left;">
				  <label>{{ index + 1 }}</label>
				  {{ item.username }}: {{  item.content }}
				  </span>
				  <span class="delete" @click="deleteComment(item.id)" v-if="u_id == item.u_id">删除</span>
			  </div>
			  </el-col>
		</el-row>
		<!-- 分页 -->
		<br>
		<el-pagination class="page" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[1, 8, 50, 100]"
		 :page-size="page_size" layout="total, prev, pager, next, jumper" :total="total">
		</el-pagination>
		<!-- 评论对话框 -->
		<el-dialog title="添加评论" :visible.sync="addDialogVisible" width="30%">
			<span>
				<el-form label-width="80px">
					<el-form-item label="评论内容:">
						<el-input v-model="content"></el-input>
					</el-form-item>
				</el-form>
			</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addcomment()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		data() {
			return {
				baseUrl: "http://127.0.0.1/thinkphp/public/uploads/",
				video_url: this.$route.params.video_url,
				v_id: this.$route.params.v_id,
				u_id: window.sessionStorage.getItem("u_id"),
				token: window.sessionStorage.getItem("token"),
				commentList: [],
				page: 1,
				page_size: 8,
				u_id: window.sessionStorage.getItem("u_id"),
				total: 0,
				addDialogVisible: false,
				content: "",
			}
		},
		created() {
			this.getCommentList();
		},
		methods: {
			addCollect() {
				let url = "addcollect/" + this.token;
				let data = new FormData();
				data.append("v_id", this.v_id);
				this.$http.post(url, data).then(res => {
					if(res.data.status == 2000){
						this.$message.success("收藏成功");
					}
				})
			},
			getCommentList() {
				let url = "commentlist/"+this.page+"/"+this.page_size+"/"+this.v_id;
				this.$http.get(url).then(res => {
					this.commentList = res.data.data;
					this.total = res.data.total;
				})
			},
			deleteComment(c_id) {
				let url = "deleteComment/"+this.token+"/"+c_id;
				// console.log(url);
				this.$http.get(url).then(res => {
					// console.log(res.data);
					if(res.data.status == 2000){
						this.getCommentList();
					}
				})
			},
			addcomment() {
				this.addDialogVisible = false;
				let url = "addcomment/" + this.token;
				let data = new FormData();
				data.append("v_id", this.v_id);
				data.append("content", this.content);
				console.log(url);
				this.$http.post(url, data).then(res => {
					if(res.data.status == 2000){
						// this.$message.success("评论成功");
						this.getCommentList();
					}
				});
			},
			handleCurrentChange(current) {
				this.page = current;
				this.getCommentList();
			},
			handleSizeChange(size) {
				this.page_size = size;
				this.getCommentList();
			},
		}
	}
</script>

<style>
	body {
		text-align: center;
	}
	.play {
		width: 900px;
		margin: 0 auto;
	}
	.video_box {
		/* height: 600px; */
		background-color: black;
		margin-bottom: 30px;
	}
	.collect {
		float: right; 
		color: white;
		margin-right: 20px;
		margin-top: 20px;
	}
	.comment {
		float: left;
	}
	 .grid-content {
		float: left;
	    border-radius: 4px;
	    min-height: 36px;
		width: 800px;
	  }
	  .delete {
		  float: right;
	  }
	  .comment_btn {
		  float: left;
		  color: white;
		  margin-left: 20px;
		  margin-top: 20px;
	  }
</style>
